<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>千锋-萍乡学院-小米商城-注册</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
	<style>
		body{
			/*background: url("img/register123.png") no-repeat;*/
			font:12px "microsoft yahei";
			color: #565656;
		}
		span{
			color: red;
			font-size: 13px;
		}

	</style>
</head>
<body>
<div class="sign_background">
	<div class="sign_background_in">
		<div class="sign_background_no1" style="margin-top: 30px;">
			<a href="index.html"><img src="img/logo.png" width="80" height="80" alt=""></a>
		</div>
		<div class="sign_background_no2">注册小米帐号</div>
		<div class="sign_background_no3">
			<font color='red'></font>
			<div class="sign_background_no5">
				<!-- enctype="multipart/form-data" -->
				<form id="f4"  method="post" action="${pageContext.request.contextPath}/userServlet?mark=register"
					  enctype="multipart/form-data">


					<table style="width: 500px;" border="0" cellspacing="0">
						<tr>
							<td width="25%" class="_left">姓名：</td>
							<td><input type="text" name="name"><span id="s_name"></span></td>
						</tr>
						<tr>
							<td width="25%" class="_left">性别：</td>
							<td>
								男<input type="radio" name="sex" checked="checked" value="0">
								女<input type="radio" name="sex" value="1">
							</td>
						</tr>
						<tr>
							<td width="25%" class="_left">电话号码：</td>
							<td><input type="text" id="phone_number" name="phone_number" ><span id="s_phone_number"></span></td>
						</tr>
						<tr>
							<td width="25%" class="_left">所在地区：</td>
							<td><input type="text" name="area"></td>
						</tr>
						<tr>
							<td width="25%" class="_left">用户名：</td>
							<td><input type="text" id="username" name="username" ><span id="s_username"></span></td>
						</tr>
						<tr>
							<td width="25%" class="_left">密码：</td>
							<td><input type="password" id="password" name="password" ><span id="s_password"></span></td>
						</tr>
						<tr>
							<td width="25%" class="_left">上传头像：</td>
							<td><input type="file" name="photo"></td>
						</tr>
					</table>
					<div class="sign_background_no6" id="btn"  style="font-size: 18px;">立即注册</div>
				</form>

			</div>
		</div>
		<div class="sign_background_no7">注册帐号即表示您同意并愿意遵守小米 <span>用户协议</span>和<span>隐私政策</span> </div>


	</div>
	<div class="sign_background_no8"><img src="img/sign01.jpg" alt=""></div>
<%--<div>--%>
<%--<div class="sign_background" style="position:absolute;left: 50%;top: 50%;width: 600px;height: 300px;margin-left: -300px;margin-top: -300px;padding: 100px;">--%>
<%--    <div class="sign_background_in">--%>
<%--        <div class="sign_background_no1" style="text-align: center; width: 50%">--%>
<%--            <a href="index.html"><img src="img/logo.png" width="80" height="80" alt=""></a>--%>
<%--        </div>--%>
<%--        <div class="sign_background_no2" style="font-size: 25px;text-align: center;width: 50%;margin-bottom: 10px;">注册小米帐号</div>--%>
<%--           <div class="sign_background_no3">--%>
<%--        	<font color='red'></font>--%>
<%--            <div class="sign_background_no5">--%>

<%--             	<!-- enctype="multipart/form-data" -->--%>
<%--             	<form id="f4"  method="post" action="${pageContext.request.contextPath}/userServlet?mark=register" enctype="multipart/form-data">--%>
<%--             		<table style="width: 500px;" border="0" cellspacing="0">--%>
<%--             			<tr>--%>
<%--             				<td width="25%" class="_left">姓名：</td>--%>
<%--             				<td><input type="text" name="name"><span id="s_name"></span></td>--%>
<%--             			</tr>--%>
<%--             			<tr>--%>
<%--             				<td width="25%" class="_left">性别：</td>--%>
<%--             				<td>--%>
<%--             					男<input type="radio" name="sex" checked="checked" value="1">--%>
<%--             				 	女<input type="radio" name="sex" value="0">--%>
<%--							</td>--%>
<%--             			</tr>--%>
<%--             			<tr>--%>
<%--             				<td width="25%" class="_left">电话号码：</td>--%>
<%--             				<td><input type="text" id="phone_number" name="phone_number" ><span id="s_phone_number"></span></td>--%>
<%--             			</tr>--%>
<%--             			<tr>--%>
<%--             				<td width="25%" class="_left">所在地区：</td>--%>
<%--             				<td><input type="text" name="area"></td>--%>
<%--             			</tr>--%>
<%--             			<tr>--%>
<%--             				<td width="25%" class="_left">用户名：</td>--%>
<%--             				<td><input type="text" id="username" name="username" ><span id="s_username"></span></td>--%>
<%--             			</tr>--%>
<%--             			<tr>--%>
<%--             				<td width="25%" class="_left">密码：</td>--%>
<%--             				<td><input type="password" id="password" name="password" ><span id="s_password"></span></td>--%>
<%--             			</tr>--%>
<%--						<tr>--%>
<%--							<td width="25%" class="_left">上传头像：</td>--%>
<%--							<td><input type="file" name="photo"> </td>--%>
<%--						</tr>--%>
<%--					</table>--%>
<%--             		<div class="sign_background_no6" id="btn" style="cursor: pointer;width: 50%;text-align: center;font-size: 18px;margin-top: 10px;color: white;" ><a style="width:100%;background-color: #ff6900;border-radius: 3px;padding: 6px;">立即注册</a></div>--%>
<%--             	</form>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--        <div class="sign_background_no7">注册帐号即表示您同意并愿意遵守小米 <span>用户协议</span>和<span>隐私政策</span> </div>--%>


<%--    </div>--%>
<%--&lt;%&ndash;	<div class="sign_background_no8"><img src="img/sign01.jpg" alt=""></div>&ndash;%&gt;--%>

<%--</div>--%>
<%--</div>--%>
</body>

<script>
	/**
	 * 定义两个标记
	 * 用作提交表单条件的判断
	 */
	var phoneFlag=false;
	var usernameFlag=false;

	/**
	 * 电话号码的判断
	 * 为空
	 * 已存在
	 */
	$("#phone_number").blur(function () {
		var phone_number = $("#phone_number").val();
		if (phone_number==null||phone_number==""){
			$("#s_phone_number").html("电话号码不能为空")
			phoneFlag=false;
		}else{
			$.ajax({
				"url":"${pageContext.request.contextPath}/userServlet",
				"type":"post",
				"data":{"mark":"checkedPhoneNumber","phoneNum":phone_number},
				"dataType":"text",
				"success":function (data) {
					// alert("电话号码"+data);
					if (data=="true"){
						$("#s_phone_number").html("OK");
						phoneFlag=true;
					}else {
						$("#s_phone_number").html("当前手机号已被注册");
						phoneFlag=false;
					}
				},
				"error":function () {
					alert("号码比对：请求失败!");
				}
			});
		}
	}).focus(function () {
		$("#s_phone_number").html("")
	});

	/**
	 * 用户名判断
	 * 为空
	 * 已存在
	 */
	$("#username").blur(function () {
		var username = $("#username").val();
		if (username==null||username==""){
			$("#s_username").html("名字不能为空");
			usernameFlag=false;
		}else {
			$.ajax({
				"url":"${pageContext.request.contextPath}/userServlet",
				"type":"post",
				"data":{"mark":"checkedUsername","userName":username},
				"dataType":"text",
				"success":function (data) {
					if (data=="true"){
						$("#s_username").html("OK");
						usernameFlag=true;
					}else {
						$("#s_username").html("名字重复！换一个");
						usernameFlag=false;
					}
				},
				"error":function () {
					alert("名字比对：请求失败!");
				}
			});
		}
	}).focus(function () {
		$("#s_username").html("");
	})

	/**
	 * 注册功能
	 */
	$("#btn").click(function () {
		if (phoneFlag==true&&usernameFlag==true){
			$("#f4").submit();
		}else {
			alert("用户名或密码违规！");
		}
	})
</script>
</html>